<template>
	<view class="page">
		<view class="top_current">
			<scroll-view class="scroll-view" scroll-x enable-flex scroll-with-animation :scroll-into-view="childrenId">
				<view class="item" v-for="(item,index) in currentChoose" :key="index" :id="'id-' + index">
					<view class="person_sex iconfont icon-renyuan1"
						:style="{'color': (item.esobject.source.sex == '男' ? '#3d8cff':'#EE82EE')}"></view>
					<view class="person_name">{{item.esobject.source.name}}</view>
				</view>
<!-- 				<view class="item" style=" color: 	#A1A1A1">
					<view class=" person_sex iconfont icon-tianjia1"></view>
					<view class="person_name">人员添加</view>
				</view> -->
			</scroll-view>
			<view class="sure">
				<button @click="addMember()">确定</button>
			</view>
		</view>
		<!-- 占位置 ——start -->
		<view :style="'height: ' + 90 + 'rpx;' + 'background: white;width:100%'"></view>
		<!-- 占位置 ——end -->
	</view>
</template>

<script>
	export default {
		name: "addMember",
		data() {
			return {
				// childrenId: 0
			};
		},
		props: {
			currentChoose: {
				type: Array,
				default() {
					return []
				}
			},
			childrenId: {
				type:String,
				default: ''
			}
		},
		methods: {
			addMember() {
				this.$emit('addMember')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.top_current {
			display: flex;
			justify-content: center;
			width: 100%;
			height: 90rpx;
			z-index: 300;
			background-color: #FFf;
			position: fixed;
			// top: 0rpx;
			
			.scroll-view {
				white-space: nowrap !important;
				width: 80%;
				// height: 120rpx;
				display: flex;
		
				// padding: 20rpx;
				.item {
					display: inline-block; //要设置为行内块
					width: 120rpx;
					height: 90rpx;
					// background-color: pink;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// border: 2rpx solid #000000;
					margin-left: 20rpx;
		
					.person_sex {
						font-size: 45rpx;
					}
		
					.person_name {
						font-size: 22rpx;
						letter-spacing: 1rpx;
					}
				}
		
		
			}
		
			.sure {
				width: 20%;
				height: 90rpx;
				position: relative;
				text-align: center;
		
				button {
					position: absolute;
					bottom: 0rpx;
					right: 20rpx;
					// width: 60%;
					font-size: 26rpx;
					background-color: #23b8ff;
					color: #FFFFFF;
				}
			}
		
		}
	}


</style>
